<!-- 富文本编辑器 组件代码如下 -->
<template>
  <div>
    <quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption"                 @change="onEditorChange($event)" />
    <div style="text-align:right">
                {{TiLength}}/300
     </div>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { modiStuCardInfo } from '../api/userOpe'

export default {
  name: 'UE',
  data () {
    return {
      // 编辑器内容表单
      form: {
        value: ''
      },
      // 限制长度
      TiLength: 0,
      content: '',
      editorOption: {
        placeholder: '最多300个字，请分点输入 1. .... 2. ....',
        modules: {
          toolbar: [
          ]
        }
      }
    }
  },
  components: {
    quillEditor
  },
  mounted () {
    // 数据初始化
    this.TiLength = this.$refs.myQuillEditor.quill.getLength() - 1
  },
  methods: {
    submit () {
      this.form.value = this.$refs.text.value
      modiStuCardInfo(this.form).then(res => {
        this.$message.success('修改成功！')
      }).catch((e) => {
        this.$message.warning('请求异常')
      })
    },
    onEditorChange (event) {
      event.quill.deleteText(300, 1)
      if (this.content === '') {
        this.TiLength = 0
      } else {
        this.TiLength = event.quill.getLength() - 1
      }
    }
  }
}

</script>
